<script lang="ts" setup>
import { onMounted } from 'vue';

const props = defineProps({
  context: Object
})

</script>

<template>
  <div>
    <h3 style="color: white; font-size: 1.2em;">临时授权申请</h3>
    <span class="singleline">申请人：{{ props.context && props.context.data.commiter }}</span>
    <span class="singleline">缘由：{{ props.context && props.context.data.description }}</span> 
    <span v-if="props.context && props.context.data.prescription" class="singleline">时效：{{ props.context.data.prescription }}</span>
    <button class="action grant" @click.stop="$emit('grant')">授权</button>
    <button class="action reject" @click.stop="$emit('reject')">驳回</button>
  </div>
</template>

<style lang="less" scoped>
.singleline {
  display: block;
  font-size: 1.1em;
}

.action {
  height: 30px;
  line-height: 15px;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 5px; 
  cursor: pointer;
  border: 0px;
  float: right;
  font-size: 1.1em;
}

.action.reject {
  color: red;
  background: #fff;  
  
  &:hover {
    animation: dangerBtn .3s;
    animation-timing-function: ease-in;
    animation-direction: normal;
    transition: all 0.3s;
    animation-fill-mode: forwards;
  }
}

.action.grant {
  color: white;
  background: #289eff;

  &:hover {
      animation: primaryBtn .3s;
      animation-timing-function: ease-in;
      animation-direction: normal;
      transition: all 0.3s;
      animation-fill-mode: forwards;
    }
}

@keyframes dangerBtn{
  from {
    background: #fff;
    color: red;
  }

  to {
    background: red;
    color: #fff;
  }
}

@keyframes primaryBtn {
  from {
    background: #289eff;
    color: white;
  }

  to {
    background: white;
    color: #289eff;
  }
}
</style>